(function () {
    let data = null,liList,titleList,descList,clickID=0,imgs=null;
    let html=document.documentElement||document.body;

    // 获取数据
    const getData = function () {
      let xhr = new XMLHttpRequest;
      xhr.open("GET", 'product.json', false);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          data = JSON.parse(xhr.responseText)
        }
      }
      xhr.send(null);
    }
    // 将数据渲染
    let newData =[]
    const render = function () {
      let str = '';
    //   let newData =[]
       data.forEach((item)=>{
        if(item.id === clickID){
           newData.push(item)
        }
      })
      newData.forEach((item) => {
        let { price, price2, title, img } = item;
        str += `
            <a class="list_item">
                <div class="imgbox">
                    <img src=""data-src="${img}" alt="">
                </div>
                <div class="item_info">
                    <p>
                        <i>自营</i>
                        ${title}
                    </p>
                </div>
                <div class="price">
                    <i>￥</i>
                    <span>${price}.</span>
                    <div>${price2}</div>
                </div>
            </a>`
      })
      products.innerHTML = str;
      imgs=document.querySelectorAll("#products img");
    }


	const loadimg=function loadimg(img){//图片懒加载
		let dataSrc=img.getAttribute("data-src");
		let newimg=new Image();
		newimg.src=dataSrc;//把dataSrc的值给newimg.src
		newimg.onload=function(){//用新图片 newimg.onload来测试图片路径是否正确
			//如果正确，才给img.src 赋值
			img.src=dataSrc;
			newimg=null;//newimg 释放
			img.flag=true;//给img添加一个属性 flag=true,说明这个图片已经加载过了
		}
	}
	const handle=function handle(){
		imgs.forEach(itemimg=>{
			let ch = html.clientHeight;//视口的高度
			let itemimgbox=itemimg.parentNode;//图片的父级，占位盒
			////图片占位盒底部距离视口顶部的高度
			let boxh=itemimgbox.getBoundingClientRect().bottom;
			if(ch>=boxh){//图片懒加载
			    if(itemimg.flag){//先验证一下图片是否加载过
					return;
				}
				loadimg(itemimg);
			}
		})
	}

    // 绑定事件
    const bindEvent = function () {
      liList = document.querySelectorAll('#lilist li');
      titleList = Array.from(document.querySelectorAll('#lilist li .titleBox'));
      descList = Array.from(document.querySelectorAll('#lilist li .feedtab_desc'));
      liList.forEach((item, index) => {
        item.onclick = function () {
          let i = index
         liList.forEach((_,index)=>{
             if(i === index){
                titleList[index].className = 'titleBox activeTab'
                descList[index].className = 'feedtab_desc activeTab1'
             }else{
                titleList[index].className = 'titleBox'
                descList[index].className = 'feedtab_desc'
             }
          })
   
            clickID = index
            newData = []
            render()
            handle();
        }

      });
    }
    //加载更多
	let count=0;
	const loadmore=function loadmore(){
		let sh=html.scrollHeight - 1000;//整个页面滚动内容的高度
		let ch=html.clientHeight;//视口的高度
		let stoph=html.scrollTop;//内容滚动过去的高度
		if(ch+stoph>=sh){//距离底部差不多100的时候，提前加载更多
            console.log(222222222222222);
			count++;
			if(count>=3){
				return;
			}
			getData();
			render();
			handle();
		}
	}
 
    getData();
    render();
    bindEvent();
    handle();
    window.onscroll=utils.throttle(function(){
        handle()
        loadmore()
    },1000)

  })();
  